<template>
   <!-- 头部导航 -->
   <div class="topBanner">
            <div class="m-topBar flex">
                <div @click="backhome">
                    <van-icon name="wap-home-o" size="28px" />
                </div>
                <a href="/"><i>网易严选</i></a>
                <div class="right flex">
                    <div @click="goSearch">
                        <van-icon name="search" size="28px" />
                    </div>
                    <div @click="gocart">
                        <van-icon name="shopping-cart-o" size="28px" />
                    </div>

                </div>
            </div>
        </div>
  <div class="editList">
    <van-address-edit :area-list="areaList" show-delete show-set-default show-search-result :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete"
      @change-detail="onChangeDetail" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {useRouter} from 'vue-router'
import { showToast } from 'vant';
const router = useRouter()
const areaList = ref<any>({})
const searchResult = ref<any[]>([]);

const onSave = () => showToast('save');
const onDelete = () => showToast('delete');
const onChangeDetail = (val: any) => {
  if (val) {
    searchResult.value = [
      {
        name: '黄龙万科中心',
        address: '杭州市西湖区',
      },
    ];
  } else {
    searchResult.value = [];
  }
};

const backhome = () => {
    router.push('/home')
}
const gocart = () => {
    router.push('/cart')

}
const goSearch = () => {
    router.push('/search')

}
</script>

<style lang="less" scoped>
.topBanner {
  width: 355px;
  height: 44px;
  line-height: 44px;
  padding: 0 8px 0 12px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #fff;

  &::after {
    content: '';
    display: block;
    clear: both;
  }

  .m-topBar {
    align-items: center;
    justify-content: space-around;

    a i {
      font-style: normal;
      color: black;
    }

    .right {
      align-items: center;
      justify-content: space-around;
    }
  }
}

//地址列表
.editList {
  margin-top: 60px;
}

//横向
.flex {
  display: flex;
}
</style>